<template>
  <Main>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="部门名称">
        <el-input size="small" v-model="formInline.name" placeholder="部门名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="fetch()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="add()" size="small" icon="el-icon-plus">新建部门</el-button>
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column fixed prop="name" label="部门名称"></el-table-column>
      <el-table-column prop="note" label="备注"></el-table-column>
      <el-table-column fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="addLower(scope.row.kid)">
            <i class="el-icon-plus"></i>新增下级部门
          </el-button>
          <el-button type="primary" size="small" @click="edit(scope.row.kid)">
            <i class="el-icon-edit"></i>
          </el-button>
          <el-button size="small" @click="del(scope.row.kid)">
            <i class="el-icon-delete"></i>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <Add ref="Add" @refresh="fetch"></Add>
    <AddLower ref="AddLower" @refresh="fetch"></AddLower>
    <Edit ref="Edit" @refresh="fetch"></Edit>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import { baseUrl } from "@/config/env";
import Add from "./add";
import AddLower from "./addlower";
import Edit from "./edit";

const urls = {
  delete: baseUrl + "/zweixin/sys/depart/delete",
  list: baseUrl + "/zweixin/sys/depart/list"
};
export default {
  methods: {
    add: function() {
      this.$refs.Add.show();
    },
    addLower: function(kid) {
      this.$refs.AddLower.show(kid);
    },
    edit: function(kid) {
      this.$refs.Edit.show(kid);
    },
    del: function(kid) {
      this.$confirm("确认要删除该部门吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        axios.get(urls.delete, { params: { kid: kid } }).then(res => {
          this.$message(res.data.result);
          this.fetch();
        });
      });
    },
    fetch() {
      axios.get(urls.list, { params: this.formInline }).then(res => {
        this.tableData = res.data.result;
      });
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        name: null
      },
      tableData: []
    };
  },
  components: {
    Add,
    AddLower,
    Edit,
    Main
  }
};
</script>